<template>
  <view class="keyboradBtn">
    <button
      class="btn"
      v-for="(item,idx) in keyList"
      :key="idx"
      @tap="KeyClick(item)"
    >{{item.key}}</button>
    <button class="btn yz" type="default" @tap="handleYz">验证</button>
  </view>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep';
import CONSTS from '@/src/consts';
export default {
  data () {
    return {
      FILE_HOST: CONSTS.FILE_HOST,
      keyList: [],
      value: ''
    }
  },
  props: {
    val: {
      type: String,
      default: ''
    }
  },

  mounted () {
    this.value = cloneDeep(this.val)
    this.initKeyborad()
  },
  watch: {
    val: {
      handler () {
        console.log('change', this.val)
        this.value = cloneDeep(this.val) || ''
      },
      deep: true
    }
  },
  methods: {
    handleYz () {
      this.$emit('verification')
    },
    KeyClick (itm) {
      if (this.value.length > 11) {
        return
      }
      this.value = this.value + itm.key + ''
      this.$emit('change', this.value)
    },
    initKeyborad () {
      for (let num = 1; num <= 9; num++) {
        this.keyList.push({ key: num })
      }
      // this.keyList.push({ key: '.' })
      this.keyList.push({ key: '0' })

    }
  },
}
</script>

<style lang="scss" scoped>
// .txt-input {
//   position: fixed;
//   top: -1000rpx;
// }
.keyboradBtn {
  position: fixed;
  bottom: 0;
  width: 100vw;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  padding: 30rpx;
  .yz {
    width: 440rpx !important;
    height: 210rpx !important;
    background: rgba(12, 212, 211, 1) !important;
    color: #ffffff !important;
    border-radius: 20rpx !important;
  }
  .btn {
    margin: 14rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210rpx;
    height: 210rpx;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 234, 238, 1);
    border-radius: 20rpx;
    background: #ffffff;
    font-size: 100rpx;
    font-weight: 500;
    color: #030303;

    &:focus,
    &:active,
    &.button-hover {
      color: #ffffff;
      background: #158f57;
    }
  }
}
</style>
